<template>
	<div>
		<Header></Header>
		<!-- 内容 -->
		<div class="w65 ma">
			<!-- 面包屑 -->
			<breadcrumb></breadcrumb>
		</div>
		<div class="conent-top">
			<div style="display: flex; justify-content: space-between; width: 99%;">
				<div class="fwb fz1 p05lr0">监测点</div>
				<div>
					<el-button
						size="mini"
						style="background-color: #2f6bbb;color: #ffffff;border: 1px solid #2f6bbb;"
						:icon="showTables ? 'el-icon-circle-close' : 'el-icon-circle-check'"
						@click="showTableClick"
					>
						{{ showTable }}
					</el-button>
				</div>
			</div>
			<table>
				<tr v-for="(item, index) in getData" :key="index">
					<td class="fwb">{{ item.remarks }}</td>
					<td>{{ item.value }}</td>
				</tr>
				<!-- <tr>
					<td class="fwb">钻孔柱状图</td>
					<td style="color: #2F6BBB;cursor: pointer;" @click="detail(getData.image)">浏览</td>
				</tr>
				<tr>
					<td class="fwb">原始资料档号</td>
					<td>{{ getData.file_number || noData }}</td>
				</tr>
				<tr>
					<td class="fwb">钻孔类型</td>
					<td>{{ getData.drill_type || noData }}</td>
				</tr>
				<tr>
					<td class="fwb">工作区名称</td>
					<td>{{ getData.name || noData }}</td>
				</tr>
				<tr>
					<td class="fwb">钻孔日期</td>
					<td>{{ getData.end_time || noData }}</td>
				</tr>
				<tr>
					<td class="fwb">终孔深度</td>
					<td>{{ getData.altitude || noData }}</td>
				</tr>
				<tr>
					<td class="fwb">施工单位</td>
					<td>{{ getData.owner_unit || noData }}</td>
				</tr>
				<tr>
					<td class="fwb">业主单位</td>
					<td>{{ getData.owner_unit || noData }}</td>
				</tr> -->
			</table>

			<!-- <div class="fwb fz1 p05lr0">项目信息</div>
			<table>
				<tr>
					<td class="fwb">项目名称</td>
					<td>{{ getData.entry_name || noData }}</td>
				</tr>
				<tr>
					<td class="fwb">资料名称</td>
					<td>辽宁省阜蒙县二道河膨润土矿普查报告</td>
				</tr>
				<tr>
					<td class="fwb">成果资料档号</td>
					<td>139076</td>
				</tr>
				<tr>
					<td class="fwb">项目结束时间</td>
					<td>2012/12/1</td>
				</tr>
				<tr>
					<td class="fwb">工作程度</td>
					<td>{{ getData.degree_of_work || noData }}</td>
				</tr>
				<tr>
					<td class="fwb">主要矿种</td>
					<td>{{ getData.minerals || noData }}</td>
				</tr>
			</table> -->

			<!-- <div class="fwb fz1 p05lr0">保管单位信息</div>
			<table>
				<tr>
					<td class="fwb">行政区划代码</td>
					<td>110102</td>
				</tr>
				<tr>
					<td class="fwb">保管单位名称</td>
					<td>全国地质资料馆</td>
				</tr>
				<tr>
					<td class="fwb">组织机构代码</td>
					<td>12100000400002398E</td>
				</tr>
				<tr>
					<td class="fwb">最高地勘资质等级</td>
					<td>甲级</td>
				</tr>
				<tr>
					<td class="fwb">上级单位名称</td>
					<td>中国地质调查局</td>
				</tr>
			</table> -->
		</div>
		<!-- 查看大图 -->
		<dialogImg :lookImg="lookImg" :biggerImg="biggerImg" @handleClose="handleClose" v-if="biggerImg"></dialogImg>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb .vue';
import dialogImg from '@/components/dialogImg.vue';
import { monitorDetails } from '@/api/resourceCenter.js';
import noData from '@/assets/noData.jpg';
export default {
	name: '',
	components: {
		breadcrumb,
		dialogImg
	},
	data() {
		return {
			biggerImg: false,
			showTables: false,
			lookImg: '',
			showTable: '全显',
			getData: []
		};
	},
	created() {
		this.getDatas(0);
	},
	methods: {
		getDatas(display) {
			let data = {
				id: this.$route.query.id,
				display
			};
			monitorDetails(data).then(res => {
				let getDatas = Object.values(res.data);
				getDatas.map((value, index) => {
					if (value.remarks == '经度') {
						getDatas.splice(index, 1);
					}
				});
				getDatas.map((value, index) => {
					if (value.remarks == '纬度') {
						getDatas.splice(index, 1);
					}
				});
				this.getData = getDatas;
			});
		},
		detail(val) {
			if (val == null) {
				this.lookImg = noData;
			} else {
				this.lookImg = val;
			}
			this.biggerImg = true;
		},
		showTableClick() {
			this.showTables = !this.showTables;
			if (this.showTables) {
				this.showTable = '隐藏';
				this.getDatas(1);
			} else {
				this.showTable = '全显';
				this.getDatas(0);
			}
		},
		handleClose(val) {
			this.biggerImg = val;
		}
	}
};
</script>

<style scoped lang="scss">
.conent-top {
	width: 65%;
	height: 100%;
	padding-bottom: 1rem;
	margin: auto;
}
table {
	width: 100%;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	// margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}
/*控制cellspacing*/
table td {
	width: 50% !important;
	padding: 0.7rem;
	font-size: 0.9rem;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
</style>
